<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>

<html>
<head>
	<title>Users</title>
	<script type="text/javascript" src="<%=request.getContextPath()%>/spring/resources/js/jquery-1.7.1.js"></script>
	<script type="text/javascript">
    $(function() {
        refreshUsersList();

        function refreshUsersList() {
            $.ajax({
            	type: 'GET',
                url: '<%=request.getContextPath()%>/spring/user/getAllUsers',
                success: function(data) {
                    var userTable = "<tr>";
                    userTable += "<td>Name</td>";
                    userTable += "<td>UserId</td>";
                    userTable += "<td>Password</td>";
                    userTable += "</tr>";
                    var users = $.parseJSON(data);
                    for(var i = 0; i < users.length; i++) {
                        userTable += "<tr>";
                        userTable += "<td>" + users[i].name + "</td>";
                        userTable += "<td>" + users[i].userId + "</td>";
                        userTable += "<td>" + users[i].password + "</td>";
                        userTable += "</tr>";
                    }
                    $('#usersList').html(userTable);
                }
            });
        }
        
        function createUser() {
        	$.ajax({
        		type: 'POST',
                url: '<%=request.getContextPath()%>/spring/user/createUser',                
                data: {name:$("#name").val(),password:$("#password").val(),userId:$("#userId").val()},
                success: function(data) {
                	refreshUsersList();
                }
        	});
        }

        $('#refreshUsers').click(refreshUsersList);                

        $('#createUserBtn').click(createUser);

        $('#clearUsersList').click(function() {
            $('#usersList').empty();
        });
    });
	</script>
</head>
<body>
<div id="createUserFormDiv">
  <fieldset>
    <label for="name" id="name_label">Name</label>
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />

    <label for="userId" id="userId_label">User Id</label>
    <input type="text" name="userId" id="userId" size="30" value="" class="text-input" />

    <label for="password" id="password_label">Password</label>
    <input type="text" name="password" id="password" size="30" value="" class="text-input" />
	<button id="createUserBtn">Create</button>
    <br /><br />    
  </fieldset>
</div>
<div>
    <table id="usersList"></table>
</div>
<button id="refreshUsers">Refresh Users</button>
<button id="clearUsersList">Clear</button>

</body>
</html>
